<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>产品分类</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/FloorNavigation.css">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <!--左侧楼层列表-->
        <div class="col-md-2">
            <img class="img_bg" src="img/FloorNavigation.png">
            <ul class="list-group">
                <li class="list-group-item" data-floorid="1"></li>
                <li class="list-group-item" data-floorid="2"></li>
                <li class="list-group-item" data-floorid="3"></li>
                <li class="list-group-item" data-floorid="4"></li>
                <li class="list-group-item" data-floorid="5"></li>
            </ul>
        </div>
        <!--右侧展示-->
        <div class="col-md-10" id="map">
            <div><img src="img/1F.jpg" width="100%" alt=""></div>
            <!--<div><img src="img/2F.jpg" width="100%" alt=""></div>
            <div><img src="img/3F.jpg" width="100%" alt=""></div>
            <div><img src="img/4F.jpg" width="100%" alt=""></div>
            <div><img src="img/5F.jpg" width="100%" alt=""></div>-->
        </div>
    </div>
    <!--返回按钮-->
    <div class="back">
        <a href="index.html">
            <img src="img/back.png" alt="">
        </a>
    </div>
</div>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    /**
     * 选中项添加样式
     */
    $(".list-group").delegate("li", "click", function () {
        $(this).addClass("listColor").siblings().removeClass("listColor");
        var num = $(this).data('floorid');
        $('#map').html('<div><img src="img/' + num + 'F.jpg" width="100%" alt=""></div>');
    });
</script>
</body>
</html>